<template>
  <jxtech-upload-picture-card
    :busi-id="busiId"
    :comp-id="compId"
    :item-type="itemType"
    :projectid="projectid"
    :download-file-url="JxtechUploadPictureCardExtState.downloadFileUrl"
    :upload-file-url="saveUploadFileUrl"
    :access-token="JxtechUploadPictureCardExtState.accessToken"
    :load-data="JxtechUploadPictureCardExtState.loadData"
    :upload-method="JxtechUploadPictureCardExtState.uploadMethod"
    :save-mulit-files="JxtechUploadPictureCardExtState.saveMulitFiles"
    :delete-file="JxtechUploadPictureCardExtState.deleteFile"
    :read-only="readOnly"
    :parentid="parentid"
    :disabled="disabled"
    :with-credentials="withCredentials"
    :accept="accept"
    :limit="limit"
    @upload-success="JxtechUploadPictureCardExtState.onUploadSuccess"
    @delete-success="JxtechUploadPictureCardExtState.onDeleteSuccess"
  ></jxtech-upload-picture-card>
</template>

<script setup lang="ts" name="JxtechUploadPictureCardExt">
import { reactive, ref, Ref, watch, nextTick } from "vue";
import { JxtechUploadPictureCard } from "@whjxtech/jxtech-component";
import type {
  pictureCardQueryParams,
  pictureCardUploadParams,
  pictureCardSaveUploadFile,
  pictureCardDeleteFileParam,
  pictureCardUploadMethodSuccess
} from "@whjxtech/jxtech-component";
import { downloadFileUrl, saveUploadFileUrl, uploadFile } from "@/api/modules/org/file-attachment";
import { getAccessToken } from "@/utils/common";
import { ExportFilesQueryExtServiceApi, ExportFilesServiceApi } from "@/api/modules/org/bean/files";
import { uploadMinoFile } from "@/api/modules/system/upload-file";
import { downloadMinioFile, downloadMInioFileUrl, MinioAttachmentBean, saveMulitFiles } from "@/api/modules/system/minio";
import { UploadModeType } from "@/config/upload";
import { SYSTEM_CONFIG } from "@/config/system";

interface JxtechUploadPictureCardExtProps {
  /**业务id */
  busiId: string;
  /**组件id */
  compId: string;
  /**业务类型 */
  itemType: string;
  /**电站id/项目id 可以不传但是建议传 */
  projectid?: string | number;
  /**是否只读 */
  readOnly?: boolean;
  /**父级id */
  parentid?: string | number;
  /**是否禁用 */
  disabled?: boolean;
  /**支持发送cookie凭证信息 */
  withCredentials?: boolean;
  /**支持上传文件类型 （thumbnail-mode 模式下此参数无效） */
  accept?: string; //png,jpg,jpeg
  /**最大上传数量 (files, fileList) */
  limit?: number;
  /**是否多选 */
  multiple?: boolean;
  /**上传模式 */
  uploadMode?: UploadModeType;
}

const emit = defineEmits<{
  (e: "upload-success", response: any): void;
  /**删除项的id 删除项的详细信息 */
  (e: "delete-success", uuid: string, item: any): void;
}>();

const props = withDefaults(defineProps<JxtechUploadPictureCardExtProps>(), {
  projectid: "1",
  disabled: false,
  withCredentials: false,
  accept: "png,jpg,jpeg",
  limit: 10,
  multiple: true,
  uploadMode: SYSTEM_CONFIG.UPLOAD_MODE
});

/**minio 上传 */
const MinioUploadState = reactive({
  downloadFileUrl: downloadMInioFileUrl,
  uploadMethod: (file: File, setProgress: Function, _params: pictureCardUploadParams) => {
    return uploadMinoFile(file, setProgress);
  },
  saveMulitFiles: (attachment: MinioAttachmentBean) => {
    return saveMulitFiles(
      attachment.attachmentId,
      props.compId,
      props.itemType,
      props.busiId,
      props.projectid,
      attachment.originalName,
      attachment.fileExt,
      attachment.mimeType,
      attachment.fileSize,
      props.parentid
    );
  }
});

/**server 上传 */
const JxudpUploadState = reactive({
  downloadFileUrl: downloadFileUrl,
  uploadMethod: (file: File, setProgress: Function, params: pictureCardUploadParams) => {
    const formData = new FormData();
    formData.append("busiId", params.busiId);
    formData.append("compId", params.compId);
    formData.append("itemType", params.itemType);
    formData.append("projectid", params.projectid);
    formData.append("typeid", params.typeid);
    formData.append("files", file as File);
    return uploadFile(formData, setProgress, file.size);
  },
  saveMulitFiles: (attachment: pictureCardUploadMethodSuccess[]) => {
    let params: pictureCardSaveUploadFile[] = [];
    attachment.forEach((item: { fileId: any }) => {
      let bean: pictureCardSaveUploadFile = {
        businessid: props.busiId,
        businesstype: props.itemType,
        filecategory: props.compId,
        projectid: props.projectid,
        typeid: props.parentid,
        uuid: item.fileId
      };
      params.push(bean);
    });
    return ExportFilesServiceApi.saveMulti({ insert: params });
  }
});

const JxtechUploadPictureCardExtState = reactive({
  accessToken: getAccessToken() || "",
  downloadFileUrl: props.uploadMode == "server" ? JxudpUploadState.downloadFileUrl : MinioUploadState.downloadFileUrl,
  /**数据加载函数 */
  loadData: (queryParams: pictureCardQueryParams) => {
    return ExportFilesQueryExtServiceApi.pageQueryAll(queryParams);
  },
  /**上传函数 */
  uploadMethod: (file: File, setProgress: Function, queryParams: pictureCardUploadParams) => {
    if (props.uploadMode == "server") return JxudpUploadState.uploadMethod(file, setProgress, queryParams);
    else return MinioUploadState.uploadMethod(file, setProgress, queryParams);
  },
  /**保存附件函数 */
  saveMulitFiles: (data: any) => {
    if (props.uploadMode == "server") JxudpUploadState.saveMulitFiles(data);
    else return MinioUploadState.saveMulitFiles(data);
  },
  /**删除附件函数 */
  deleteFile: (deleteFileParamArray: pictureCardDeleteFileParam[]) => {
    return ExportFilesServiceApi.delFiles(deleteFileParamArray);
  },
  /**上传成功callback */
  onUploadSuccess: (response: any) => {
    // console.log('上传成功callback', response);
    emit("upload-success", response);
  },
  /**删除成功callback */
  onDeleteSuccess: (uuid: string, item: any) => {
    // console.log('删除成功callback', uuid, item);
    emit("delete-success", uuid, item);
  }
});
</script>

<style lang="scss" scoped></style>
